<template>
  <ContentWrap class="!mb-0 questionnaire-create">
    <!-- 表单设计器 -->
    <div class="fc-designer-container">
      <fc-designer class="my-designer" ref="designer" :config="designerConfig">
        <template #handle>
          <el-button size="small" type="success" plain @click="submitForm">
            <Icon class="mr-5px" icon="ep:plus" />
            保存
          </el-button>
        </template>
      </fc-designer>
    </div>
  </ContentWrap>
</template>
<script lang="ts" setup>
import { QuestionnaireApi, QuestionnaireVO } from '@/api/school/questionnaire'
import FcDesigner from '@form-create/designer'
import { encodeConf, encodeFields, setConfAndFields } from '@/utils/formCreate'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { useFormCreateDesigner } from '@/components/FormCreate'
import { useRoute } from 'vue-router'

defineOptions({ name: 'BpmFormEditor' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息
const route = useRoute() // 路由
const { push, currentRoute } = useRouter() // 路由
const { query } = useRoute() // 路由信息
const { delView } = useTagsViewStore() // 视图操作
const componentsNames = [
  'input',
  'textarea',
  'password',
  'inputNumber',
  'radio',
  'checkbox',
  'select',
  'switch',
  'rate',
  'timePicker',
  'timeRange',
  'slider',
  'datePicker',
  'dateRange',
  'colorPicker',
  'cascader',
  'upload',
  'elTransfer',
  'tree',
  'elTreeSelect',
  'fcEditor',
  'Editor',
  'UploadFile',
  'UploadImg',
  'UploadImgs'
]
const updateDefaultRules = () => {
  const rules = {}
  componentsNames.forEach((name) => {
    rules[name] = {
      $required: true
    }
  })
  return rules
}
// 表单设计器配置
const designerConfig = ref({
  switchType: [], // 是否可以切换组件类型,或者可以相互切换的字段
  autoActive: true, // 是否自动选中拖入的组件
  useTemplate: false, // 是否生成vue2语法的模板组件
  formOptions: {
    form: {
      labelPosition: 'top',
      labelWidth: '100px' // 设置默认的 label 宽度为 100px
    }
  }, // 定义表单配置默认值
  fieldReadonly: false, // 配置field是否可以编辑
  hiddenDragMenu: false, // 隐藏拖拽操作按钮
  hiddenDragBtn: false, // 隐藏拖拽按钮
  hiddenMenu: ['layout', 'aide', 'subform', 'system'], // 隐藏部分菜单
  hiddenItem: ['elTransfer', 'elTreeSelect'], // 隐藏部分组件
  hiddenItemConfig: {}, // 隐藏组件的部分配置项
  disabledItemConfig: {}, // 禁用组件的部分配置项
  showSaveBtn: false, // 是否显示保存按钮
  showConfig: true, // 是否显示右侧的配置界面
  showBaseForm: true, // 是否显示组件的基础配置表单
  showControl: true, // 是否显示组件联动
  showPropsForm: true, // 是否显示组件的属性配置表单
  showEventForm: true, // 是否显示组件的事件配置表单
  showValidateForm: true, // 是否显示组件的验证配置表单
  showFormConfig: true, // 是否显示表单配置
  showInputData: true, // 是否显示录入按钮
  showDevice: true, // 是否显示多端适配选项
  appendConfigData: [], // 定义渲染规则所需的formData

  updateDefaultRule: updateDefaultRules()
})
const designer = ref() // 表单设计器
useFormCreateDesigner(designer) // 表单设计器增强
const dialogVisible = ref(false) // 弹窗是否展示
const formLoading = ref(false) // 表单的加载中：提交的按钮禁用
const formData: any = ref({})
const formRules = reactive({
  name: [{ required: true, message: '表单名不能为空', trigger: 'blur' }],
  status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref

/** 处理保存按钮 */
const handleSave = () => {
  dialogVisible.value = true
}

/** 提交表单 */
const submitForm = async () => {
  // 校验表单
  // if (!formRef) return
  // const valid = await formRef.value.validate()
  // if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as QuestionnaireVO
    const designerData: any = {}
    designerData.conf = encodeConf(designer) // 表单配置
    designerData.fields = encodeFields(designer) // 表单字段
    data.formJson = JSON.stringify(designerData) // 将表单字段转换为JSON字符串
    if (!data.id) {
      await QuestionnaireApi.createQuestionnaire(data)
      message.success(t('common.createSuccess'))
    } else {
      await QuestionnaireApi.updateQuestionnaire(data)
      message.success('保存成功')
    }
    dialogVisible.value = false
    close()
  } finally {
    formLoading.value = false
  }
}
/** 关闭按钮 */
const close = () => {
  delView(unref(currentRoute))
  push('/school/questionnaire')
}

/** 初始化 **/
onMounted(async () => {
  // 场景一：新增表单
  const id = query.id as unknown as number
  if (!id) {
    return
  }
  // 场景二：修改表单
  const data = await QuestionnaireApi.getQuestionnaire(id)
  formData.value = data
  const formJson = JSON.parse(data.formJson || '{}')
  if (formJson.conf && formJson.fields) {
    setConfAndFields(designer, formJson.conf, formJson.fields)
  }
  if (route.query.type !== 'copy') {
    return
  }
  // 场景三： 复制表单
  const { id: foo, ...copied } = data
  formData.value = copied
  formData.value.name += '_copy'
})
</script>

<style lang="scss" scoped>
.questionnaire-create {
  :deep {
    .el-card__body {
      padding: 0 !important;
      margin-top: -2px !important;
    }
  }
}

.fc-designer-container {
  height: $content-height;
}

.my-designer {
  ._fc-l,
  ._fc-m,
  ._fc-r {
    border-top: none;
  }
}
</style>
